<%@page pageEncoding="UTF-8"%>
<%@ include file="../include/header.jsp"%>
<body>
	<div id="app" v-cloak>

		<!--条件查询 -->
		<div class="toolbar2">
			<el-form :inline="true" :model="filters" label-position="top" size="small">
				<div style="margin-left: 16px;position: relative;">
					<el-form-item label="经营户名称">
						<el-input v-model="filters.searchStr" placeholder="经营户名称" clearable></el-input>
					</el-form-item>
					<el-form-item label="经营区域">
						<el-cascader v-model="regionIds" :options="regionData" :props="regionProps" @change="handleRegionChange" clearable></el-cascader>
					</el-form-item>
					<el-form-item label=" ">
						<el-button type="primary" @click="loadData" class="sbtn">查询</el-button>
					</el-form-item>
				</div>
			</el-form>
		</div>

		<div style="position: relative">
			<el-table :data="tableData" border stripe v-loading="loading" :height="tableH" ref="table">
				<el-table-column prop="name" label="名称" min-width="100"></el-table-column>
				<el-table-column prop="person" label="负责人" min-width="100"></el-table-column>
				<el-table-column prop="mobile" label="联系电话" min-width="100"></el-table-column>
				<ex-table-column-enum prop="mainType" enum-cd="001" label="主体类型" width="150"></ex-table-column-enum>
				<el-table-column prop="address" label="地址" min-width="150"></el-table-column>
				<el-table-column prop="socialCode" label="统一社会信用代码" min-width="150"></el-table-column>
				<el-table-column label="营业执照" width="250">
					<template scope="scope">
						<el-image style="width: 100px; height: 100px" :src="'${imgesBaseUrl}/'+ scope.row.licenseImage"  :preview-src-list="previewList(scope.row)"></el-image>
					</template>
				</el-table-column>
				<el-table-column label="操作" width="250">
					<template scope="scope">
						<el-button type="" size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
						<!-- <el-button type="info" size="small" @click="handleEditAccount(scope.$index, scope.row)">账号</el-button> -->
						<el-button type="danger" size="small" v-if="scope.row.code != 'admin'" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>

		<!-- <div style="position: absolute;left: 8px;margin: 9px 0 8px 0;">
			<el-button icon="plus" type="primary" @click="handleAdd" size="mini">新增</el-button>
		</div> -->
		<div style="position: absolute;right: 8px;margin: 5px 0 5px 0;">
			<el-pagination v-if="isMobile == 'true'" :current-page="page" :page-size="size" :pager-count="2" :total="total"
			 :page-sizes="[10,20,50,100]" @size-change="sizeChange" @current-change="handleCurrentChange" layout="total, prev, pager, next"></el-pagination>
			<el-pagination v-else :current-page="page" :page-size="size" :total="total" :page-sizes="[10,20,50,100]"
			 @size-change="sizeChange" @current-change="handleCurrentChange" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
		</div>


		<!--编辑界面-->
		<el-dialog title="编辑" :visible.sync="editFormVisible" :close-on-click-modal="false" @open="handleOpen" @close="handleClose"
		 width="700px">
			<el-form :model="editForm" label-width="100px" :rules="editFormRules" ref="editForm" :inline="false">
				<el-form-item label="名称" prop="name">
					<el-input v-model.trim="editForm.name" auto-complete="off" style="width: 320px;"></el-input>
				</el-form-item>
				<el-form-item label="负责人" prop="person">
					<el-input v-model.trim="editForm.person" auto-complete="off" style="width: 320px;"></el-input>
				</el-form-item>
				<el-form-item label="联系电话" prop="mobile">
					<el-input v-model.trim="editForm.mobile" auto-complete="off" style="width: 320px;"></el-input>
				</el-form-item>
				<el-form-item label="主体类型" prop="mainType">
					<ex-select-enum v-model="editForm.mainType" enum-cd="001" style="width: 320px;"></ex-select-enum>
				</el-form-item>
				<el-form-item label="经营区域" prop="regionIds">
					<el-cascader v-model="editForm.regionIds" :options="regionData" :props="regionProps2" @change="handleRegionChange2" style="width: 320px;"></el-cascader>
				</el-form-item>
				<el-form-item label="商户地址" prop="address">
					<el-input v-model.trim="editForm.address" auto-complete="off" style="width: 320px;"></el-input>
				</el-form-item>
				<el-form-item label="信用代码" prop="socialCode">
					<el-input v-model.trim="editForm.socialCode" auto-complete="off" style="width: 320px;"></el-input>
				</el-form-item>
				<el-form-item label="营业执照" prop="licenseImage">
					<el-upload class="avatar-uploader" action="${ctx}/backstage/file/imgUpload?saveType=licenseImage" :show-file-list="false"
					 :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
						<img v-if="editForm.licenseImage" :src="'${imgesBaseUrl}/'+editForm.licenseImage" class="avatar">
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="handleSave" :loading="editLoading">提交</el-button>
			</div>
		</el-dialog>

		<el-dialog :title="'账号密码：'+ editAccountForm.name" :visible.sync="editAccountFormVisible" :close-on-click-modal="false"
		 width="700px">
			<el-form :model="editAccountForm" label-width="100px" :rules="editAccountFormRules" ref="editAccountForm" :inline="false">
				<el-form-item label="账号" prop="code">
					<el-input v-model.trim="editAccountForm.code" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="密码" prop="password">
					<el-input type="password" v-model.trim="editAccountForm.password" auto-complete="off"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="handleAccountSave" :loading="editLoading">提交</el-button>
			</div>
		</el-dialog>
	</div>
</body>
<script>
	$(window).resize(function() {
		app.tableH = $(window).height() - 155;
	});
	var app = new Vue({
		el: '#app',
		data: {
			isMobile: '${isMobile}',
			tableH: $(window).height() - 155,
			loading: false,
			page: 1,
			size: 10,
			total: 0,
			filters: {
				searchStr: '',
				districtId: '',
				townId: ''
			},
			regionIds: [],
			editFormVisible: false,
			editLoading: false,
			editFormRules: {
				name: [{
					required: true,
					message: '不能为空！'
				}],
				person: [{
					required: true,
					message: '不能为空！'
				}],
				mobile: [{
					required: true,
					message: '不能为空！'
				}],
				mainType: [{
					required: true,
					message: '不能为空！'
				}],
				address: [{
					required: true,
					message: '不能为空！'
				}],
				socialCode: [{
					required: true,
					message: '不能为空！'
				}],
				regionIds: [{
					type: 'array',
					required: true,
					message: '请选择区域',
					trigger: 'blur'
				}]
			},
			editForm: {},
			tableData: [],
			regionData: [],
			regionProps: {
				label: 'name',
				value: 'id',
				children: 'children',
				checkStrictly: true
			},
			regionProps2: {
				label: 'name',
				value: 'id',
				children: 'children',
				checkStrictly: false
			},
			editAccountFormVisible: false,
			editAccountForm: {},
			editAccountFormRules: {
				code: [{
					required: true,
					message: '不能为空！'
				}],
				password: [{
					required: true,
					message: '不能为空！'
				}]
			}
		},
		created: function() {
			this.loadData();
			this.loadRegionData();
		},
		methods: {
			loadData: function() {
				this.loading = true;
				var data = Object.assign({
					state: 1
				}, this.filters);
				data.page = this.page;
				data.size = this.size;
				$.ajax({
					url: "${ctx}/backstage/individual/query",
					data: data,
					dataType: 'json',
					success: function(returndata) {
						if (returndata.success) {
							app.total = returndata.data.count;
							app.tableData = returndata.data.list;
						} else {
							app.total = 0;
							app.tableData = [];
							app.$notify.error({
								title: '错误',
								message: returndata.errors.message
							});
						}
						app.loading = false;
					}
				});
			},
			loadRegionData: function() {
				$.ajax({
					url: "${ctx}/backstage/town/queryRegion",
					dataType: 'json',
					success: function(returndata) {
						if (returndata.success) {
							app.regionData = returndata.data;
						} else {
							app.regionData = [];
							app.$notify.error({
								title: '错误',
								message: returndata.errors.message
							});
						}
					}
				});
			},
			handleSearch: function() {
				this.loadData();
			},
			sizeChange: function(val) {
				this.size = val;
				this.loadData();
			},
			handleCurrentChange: function(val) {
				this.page = val;
				this.loadData();
			},
			handleClose: function() {
				this.editLoading = false;
			},
			handleOpen: function() {
				if (this.$refs.editForm) {
					this.$refs.editForm.resetFields();
				}
			},
			handleAdd: function() {
				this.editFormVisible = true;
			},
			handleEdit: function(index, row) {
				this.editForm = Object.assign({regionIds:[]}, row);
				this.editForm.regionIds = [this.editForm.district,this.editForm.town];
				this.editFormVisible = true;
			},
			handleSave: function() {
				this.$refs['editForm'].validate(function(value) {
					if (value) {
						app.editForm.district = app.editForm.regionIds[0];
						app.editForm.town = app.editForm.regionIds[1];
						app.editLoading = true;
						$.ajax({
							url: "${ctx}/backstage/individual/edit",
							data: app.editForm,
							dataType: 'json',
							success: function(returndata) {
								if (returndata.success) {
									app.loadData();
									app.$message({
										message: '提交成功!',
										type: 'success'
									});
									app.editFormVisible = false;
								} else {
									app.$message({
										message: returndata.errors.message,
										type: 'error'
									});
								}
								app.editLoading = false;
							}
						});
					}
				});
			},
			handleDelete: function(index, row) {
				this.$confirm('确认删除该记录吗？', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(function() {
					app.editLoading = true;
					$.ajax({
						url: "${ctx}/backstage/individual/delete",
						data: {
							id: row.id
						},
						dataType: 'json',
						success: function(returndata) {
							if (returndata.success) {
								app.loadData();
								app.$message({
									message: '删除成功!',
									type: 'success'
								});
							} else {
								app.$message({
									message: returndata.errors.message,
									type: 'error'
								});
							}
							app.editLoading = false;
						}
					});
				});
			},
			handleEditAccount: function(index, row) {
				if (this.$refs.editAccountForm) {
					this.$refs.editAccountForm.resetFields();
				}
				this.editAccountForm = Object.assign({}, row, {
					password: ''
				});
				this.editAccountFormVisible = true;
			},
			handleAccountSave: function() {
				this.$refs['editAccountForm'].validate(function(value) {
					if (value) {
						app.editLoading = true;
						$.ajax({
							url: "${ctx}/backstage/person/resetPassword",
							data: app.editAccountForm,
							dataType: 'json',
							success: function(returndata) {
								if (returndata.success) {
									app.loadData();
									app.$message({
										message: '提交成功!',
										type: 'success'
									});
									app.editAccountFormVisible = false;
								} else {
									app.$message({
										message: returndata.errors.message,
										type: 'error'
									});
								}
								app.editLoading = false;
							}
						});
					}
				});
			},
			beforeAvatarUpload: function(file) {
				const isJPG = file.type === 'image/jpeg';
				const isGIF = file.type === 'image/gif';
				const isPNG = file.type === 'image/png';
				const isBMP = file.type === 'image/bmp';
				const isLt5M = file.size / 1024 / 1024 < 5;
				//判断图片格式
				if (!isJPG && !isGIF && !isPNG && !isBMP) {
					this.$message({
						showClose: true,
						message: '上传图片必须是JPG/GIF/PNG/BMP 格式!',
						type: 'error'
					});
				}
				//判断图片格式大小
				if (!isLt5M) {
					this.$message({
						showClose: true,
						message: '上传图片大小不能超过 5MB!',
						type: 'error'
					});
				}
				return (isJPG || isBMP || isGIF || isPNG);
			},
			//图片上传成功调用函数，文件上传成功时的钩子
			handleAvatarSuccess: function(res, file, fileList) {
				if (res.success) {
					this.editForm.licenseImage = res.url;
				} else {
					app.$notify.error({
						title: '错误',
						message: res.errors.message
					});
				}
			},
			handleRegionChange: function(val) {
				switch (val.length) {
					case 0:
						this.filters.districtId = '';
						this.filters.townId = '';
						break;
					case 1:
						this.filters.districtId = val[0];
						this.filters.townId = '';
						break;
					case 2:
						this.filters.districtId = val[0];
						this.filters.townId = val[1];
						break;
				}
			},
			handleRegionChange2: function(val) {
				switch (val.length) {
					case 0:
						this.editForm.district = '';
						this.editForm.town = '';
						break;
					case 1:
						this.editForm.district = val[0];
						this.editForm.town = '';
						break;
					case 2:
						this.editForm.district = val[0];
						this.editForm.town = val[1];
						break;
				}
			},
			previewList: function(row){
				var arr = [];
				arr.push('${imgesBaseUrl}/' + row.licenseImage);
				return arr;
			}
		}
	});
</script>
